<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		const reactive = target => {
			return new Proxy(target, {
				get(target, key, receiver) {
					// console.log("target:", target)
					// console.log("key:", key)
					// console.log("receiver:", receiver)
					console.log(`访问了${key}属性,获取它的值为${target[key]}`)
					// return target[key]
					return Reflect.get(target, key, receiver)
				},
				set(target, key, value, receiver) {
					console.log(`将${key}由->${target[key]}->设置成->${value}`)
					// target[key] = value;
					return Reflect.set(target, key, value, receiver)
				}
			})
		}

		const data = {
			name: "老陈",
			age: 16
		}

		const objData = reactive(data)
	</script>
</body>

</html>